<template>
    <div class="student">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <h2>当前求和为：{{number}}</h2>
        <button @click="add">点我 number++</button>
        <button @click="sendStudentName">把学生名称给APP</button>
        <button @click="unbind">解绑sendEvent事件</button>
        <button @click="death">销毁当前 Student 组件的实例</button>
    </div>
</template>

<script>
    export default {
        name: "Student",
        data() {
            return {
                name:'张三',
                sex:'男',
                number: 0
            }
        },
        methods: {
            add() {
                console.log('add 被回调了');
                this.number++;
            },
            sendStudentName() {
                // 触发 Student 组件实例上的 callbackFunc 事件
                this.$emit('sendEvent', this.name);
            },
            unbind() {
                // 解绑一个自定义事件
                this.$off('sendEvent');
                // 解绑多个自定义事件
                // this.$off('one-event', 'another-event');
                // 解绑 Student 组件上所有的自定义事件
                // this.$off();
            },
            death() {
                // 销毁了当前 Student 组件的实例，销毁后所有的 Student 实例的自定义事件全都不奏效
                this.$destroy();
            }
        }
    }
</script>

<!--  让样式在局部生效，防止和其它的组件产生冲突 -->
<style scoped>
    .student {
        background-color: orange;
        padding: 5px;
        margin-top: 30px;
    }
</style>